<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="file" id="file">
  <img  alt="加载中" id="src">
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
  <script>
    var file = document.getElementById('file')
    file.onchange = function (e) {
      var img = document.getElementById('src')
      var base = new FileReader()
      console.log(e.target.files[0])
      var all = e.target.files[0]
      var size = e.target.files[0].size / 10
      var init = 0
      var arr = []
      var index = 0
      while (init < e.target.files[0].size) {
        arr.push(all.slice(init, init + size))
        init = init + size
      }
      console.log(arr)
      arr.map((res, index) => {
        const form = new FormData()
        form.append('file', res)
        axios({
          url: 'http://localhost:4000/upla?name=' + index + '&size=' + 9,
          method: 'post',
          data: form
        }).then(res => {
          console.log(res)
          if (res.data.ok === 200) {
            axios({
              url: 'http://localhost:4000/merge?name=' + e.target.files[0].name,
              method: 'get'
            }).then(suc => {
              console.log(suc)
              img.setAttribute('src',suc.data.url)
            })
          }
        })
      })
      var name = e.target.files[0].name
      var type = e.target.files[0].type
      base.readAsDataURL(new Blob([e.target.files[0]]))
      base.onload = function (e) {
        const base64 = atob(e.target.result.split(',')[1])
        // const buffer = new ArrayBuffer(base64.length) // 创建缓存视图
        // const u8 = new Uint8Array(buffer) // 将缓存视图 赋值 字节流数组 来 创建一个模板数组
        // for(let i =0;i<=base64.length-1;i++) {
        //   u8[i] = base64.charCodeAt(i)
        // }
        // console.log(u8)
        // console.log(new Blob([u8],{type: 'image/jpg'}))

        const u8 = new Uint8Array(base64.length) // 将缓存视图 赋值 字节流数组 来 创建一个模板数组
        for (let i = 0; i <= base64.length - 1; i++) {
          u8[i] = base64.charCodeAt(i)
        }

        console.log(u8)
        const fil = new File([u8], name, {
          type: type
        })
        console.log(fil)

        // var n = base64.length; //      
        // var u8arr = new Uint8Array(n);
        // // 指定解码base64字符串的编码方式 转为8进制的字节数组 指定长度 
        // // 只有一个参数 可以是长度 也可以是buffer二进制流 
        // while (n--) {
        //   u8arr[n] = base64.charCodeAt(n); // 一个个字符串的转化
        // }
        // console.log(u8arr)
        // const fil = new File([u8arr], name, {
        //   type: type
        // })
        // console.log(fil)
        const from = new FormData()
        from.append('file', fil)
        // axios({
        //   url: 'http://localhost:4000/upla',
        //   method: 'post',
        //   data: from
        // }).then(res => {
        //   console.log(res)
        // })
      }
    }
  </script>
</body>

</html>